<!-- extend base layout -->
{% extends "base.html" %}

{% block content %}
<table class="table table-auto">
    <tr valign="top">
        <td><img src="{{user.avatar(128)}}"></td>
        <td>
            {% if user.about_me %}<p>{{user.about_me}}</p>{% endif %}
            {% if user.last_seen %}<p><i>Last seen on: {{user.last_seen.strftime("%Y-%m-%d %H:%M:%S")}}</i></p>{% endif %}
            <!--{% if user.last_seen %}<p><i>Last seen on: {{ momentjs(user.last_seen).calendar() }}</i></p>{% endif %}-->
            <p>{{user.followers.count()}} followers | {{ user.followed.count() }} following.</p>
            {% if user == current_user %}
            <p><a href="{{url_for('edit_user')}}">Edit Your Profile</a></p>
            {% elif not current_user.is_following(user) %}
            <p><a href="{{url_for('follow', nickname = user.nickname)}}">Follow</a></p>
            {% else %}
            <p><a href="{{url_for('unfollow', nickname = user.nickname)}}">Unfollow</a></p>
            {% endif %}
        </td>
    </tr>
</table>

<!-- Posts Table -->
<table class="table table-hover table-auto">
    {% for post in posts.items %}
        {% include "post.html" %}
    {% endfor %}
</table>

<!-- 分页 -->
<ul class="pager">
    {% if posts.has_prev %}
    <li>
        <a href="{{ url_for('user', nickname = user.nickname, page = posts.prev_num) }}" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span> Newer
        </a>
    </li>
    {% else %}
    <li class="disabled">
        <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span> Newer
        </a>
    </li>
    {% endif %}

    {% if posts.has_next %}
    <li>
        <a href="{{ url_for('user', nickname = user.nickname, page = posts.next_num) }}" aria-label="Next">
            Older <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
    {% else %}
    <li class="disabled">
        <a href="#" aria-label="Previous">
            Older <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
    {% endif %}
</ul>
{% endblock %}